<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lof JSliderNews 1.0 - Jquery 1.3</title>
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.easing.js"></script>
<script language="javascript" type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
 $(document).ready( function(){	
		$('#lofslidecontent45').lofJSidernews( { interval:2000,
											 	easing:'easeOutBounce',
												duration:1200,
												auto:true } );						
	});

</script>
<style>
	.lof-snleft  .lof-main-outer{
		float:right;
	}
	/* move the main wapper to the right side */
	.lof-snleft .lof-main-wapper{
		margin-left:auto;
		margin-right:inherit;
		clear:both;
		height:300px;
	}
	/* move the navigator to the left  side */
	.lof-snleft .lof-navigator-outer{
		left:0;
		top:0;
		right:inherit;
		
	}
	
	ul.lof-main-wapper li {
		position:relative;	
	}
	.lof-snleft .lof-navigator .active{
		background:url(images/arrow-bg2.gif) center right no-repeat;
	}
	.lof-snleft .lof-navigator li div{
		margin-left:inherit;
		margin-right:18px;
	}
	
	.lof-snleft .lof-navigator li.active div{
		margin-left:inherit;
		margin-right:18px;
		background:url(images/grad-bg2.gif)
		
	}
</style>
</head>
<body>
	<div id="container">
    		<h1><strong>Lof JSliderNews 1.0</strong> -  Jquery 1.3 & Easing plugin</h1>
       
 <p>
	<strong> Direction: Left - Right - Navitagor on the right side .</strong> 
    The plugin allow to use the wheelup and wheeldown to previous|next item in the list
</p>       
<!------------------------------------- THE CONTENT ------------------------------------------------->
<div id="lofslidecontent45" class="lof-slidecontent  lof-snleft">
<div class="preload"><div></div></div>
 <!-- MAIN CONTENT --> 
  <div class="lof-main-outer">
  	<ul class="lof-main-wapper">
  		<li>
        		<img src="images/791902news3.jpg" title="Newsflash 2" height="300" width="900">           
                 <div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 2" href="#">Newsflash 2</a></h3>

                <p>The one thing about a Web site, it always changes! Joomla! makes it easy to add Articles, content,...</p>
             </div>
        </li> 
       <li>
        	<img src="images/435576news10.jpg" title="Newsflash 1" height="300" width="900">            <div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 1" href="#">Newsflash 1</a></h3>
                <p>Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are...</p>

             </div>
        </li> 
       <li>
        	<img src="images/641906img1.jpg" title="Newsflash 3" height="300" width="900">            <div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 3" href="#">Newsflash 3</a></h3>
                <p>With a library of thousands of free Extensions, you can add what you need as your site grows. Don't...</p>
             </div>
        </li> 
        <li>

        	<img src="images/416719news7.jpg" title="Newsflash 5" height="300" width="900">            <div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 5" href="#">Newsflash 5</a></h3>
                <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>
             </div>
        </li> 
        
        <li>

        	<img src="images/416719news7.jpg" title="Newsflash 5" height="300" width="900">            <div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 5" href="#">Newsflash 5</a></h3>
                <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>
             </div>
        </li> 
        <li>

        	<img src="images/416719news7.jpg" title="Newsflash 5" height="300" width="900">            <div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 5" href="#">Newsflash 5</a></h3>
                <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>
             </div>
        </li> 
      </ul>  	
  </div>
  <!-- END MAIN CONTENT --> 
    <!-- NAVIGATOR -->

  <div class="lof-navigator-outer">
  		<ul class="lof-navigator">
            <li>
            	<div>
                	<img src="images/lofthumbs/791902news3.jpg" />
                	<h3> NewsFlash 1 </h3>
                  	<span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu...
                </div>    
            </li>
             <li>
             	<div>
                	<img src="images/lofthumbs/435576news10.jpg" />
                 	<h3> NewsFlash 2 </h3>
                  	<span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
                </div>    
            </li>

            <li>
            	<div>
                    <img src="images/lofthumbs/641906img1.jpg" />
                    <h3> NewsFlash 3 </h3>
                	<span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
                </div>     
            </li>
            
           <li>
           		<div>
                    <img src="images/lofthumbs/416719news7.jpg" />
                    <h3> NewsFlash 4</h3>
                    <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
                </div>
            </li>    
            <li>
           		 <div>
                 	<img src="images/lofthumbs/641906img1.jpg" />
                 	<h3> NewsFlash 5</h3>
                 	<span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
                 </div>   
            </li>
           <li>
           		<div>
                    <img src="images/lofthumbs/416719news7.jpg" />
                    <h3> NewsFlash 6</h3>
               		<span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
                </div>
            </li>     		
        </ul>
  </div>
 </div> 
<script type="text/javascript">

</script>

<!------------------------------------- END OF THE CONTENT ------------------------------------------------->
 <p> 
<a href="index.html">Demo 1</a>  | <a href="index2.html">Demo 2</a>  |  <a href="index3.html">Demo 3</a> | <a href="index4.html">Demo 4</a> | <a href="index5.html">Demo 5</a> | <a href="index6.html">Demo 6</a> </p>
<div id="footer">
 <a href="http://landofcoder.com">LandOfCoder.Com</a>
</div>
    </div>
</body>
</html>
